<template>
	<view class="page2">
		<view @click="isMore = false">
			<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
				<!-- 返回 -->
				<view class="back" @click="onBack">
					<view class="back-one" :class="{ action: PageScrollTop > 120 }">
						<text></text>
					</view>
				</view>
				<!-- tab切换 -->
				<view class="head-tab" v-if="PageScrollTop > 120">
					<view class="tab" :class="{'action':TabShow===0}" @click="onTab(0)">
						<text>商品</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':TabShow===1}" @click="onTab(1)">
						<text>评价</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':TabShow===2}" @click="onTab(2)">
						<text>详情</text>
						<text class="line"></text>
					</view>
				</view>
			</view>
			<!-- banner，标题 -->
			<view class="banner-title">
				<!-- banner -->
				<view class="banner">
					<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
						duration="500">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image :src="item.url"></image>
							<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
		          }}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
						</swiper-item>
					</swiper>
				</view>
				<!-- 价格 -->
				<view class="price-info" v-show="type==0">
					<view class="price">
						<text class="min">￥</text>
						<text class="max">99</text>
						<text class="min">.00</text>
					</view>
					<view class="info">
						<view class="list" @click="onDepreciate">
							<uv-icon name="pushpin"></uv-icon>
							<text>降价通知</text>
						</view>
						<view class="list" @click="onAttention">
							<uv-icon :name="AttentionShow===0?'heart':'heart-fill'"></uv-icon>
							<text>{{ AttentionShow === 0 ? '关注' : '已关注' }}</text>
						</view>
					</view>
				</view>
				<!-- 限时抢购 -->
				<view class="flash-price" v-show="type==1">
					<view class="price-item">
						<view class="icon-item">
							<text class="iconfont icon-flash-sale"></text>
						</view>
						<view class="price">
							<view class="current-price">
								<text class="min">￥</text>
								<text class="max">99</text>
								<text class="min">.00</text>
							</view>
							<view class="original-price">
								<text>￥149.00</text>
							</view>
						</view>
						<view class="tag">
							<text class="iconfont icon-flash-naozhong"></text>
						</view>
					</view>
					<view class="time-item">
						<view class="title">
							<text>距结束还剩：</text>
						</view>
						<view class="time">
							<text class="num">02</text>
							<text class="dot">:</text>
							<text class="num">46</text>
							<text class="dot">:</text>
							<text class="num">52</text>
						</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class="goods-title">
					<text>黑土优选 东北特产黑龙江黑木耳</text>
				</view>
				<!-- 开通会员 -->
				<view class="dredge-vip">
					<view class="title">
						<text class="iconfont icon-vip"></text>
						<text>
							开通年卡会员预计估算优惠
							<text class="col">15.37</text>
							元
						</text>
					</view>
					<view class="dredge">
						<text>立即</text>
						<text>开通</text>
					</view>
				</view>
			</view>
			<!-- 优惠积分 -->
			<view class="goods-discounts">
				<view class="list">
					<view class="title">积分</view>
					<view class="content">
						<text>购买本商品可获得100积分</text>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="list" @click="goodsserve = true">
					<view class="title">服务</view>
					<view class="content">
						<view class="serve">
							<text class="iconfont icon-baozheng"></text>
							<text>退款保证</text>
						</view>
						<view class="serve">
							<text class="iconfont icon-baozheng"></text>
							<text>物流配送</text>
						</view>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="list" @click="goodscoupon = true">
					<view class="title">领券</view>
					<view class="content">
						<view class="coupon-list">
							<view>满19减5</view>
						</view>
						<view class="coupon-list">
							<view>满19减5</view>
						</view>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
			<!-- 属性规格 -->
			<view class="goods-discounts">
				<view class="list" @click="goodsattr = true,BuyType = 1">
					<view class="title">已选</view>
					<view class="content">
						<text>蓝色,2件</text>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="list">
					<view class="title">送至</view>
					<view class="content">
						<view class="serve">
							<text class="iconfont icon-dingwei"></text>
							<text>黑龙江哈尔滨道外</text>
						</view>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="list">
					<view class="title">运费</view>
					<view class="content">
						<text>免运费</text>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="evaluate-data" ref="evaluate">
				<view class="title-more" @click="onEvaluate">
					<view class="title">
						<text>评价</text>
						<text class="num">999+</text>
					</view>
					<view class="more">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="evaluate-list">
					<view class="user-info">
						<view class="thumb">
							<image src="https://gd-hbimg.huaban.com/4df49ef52ede528703e27f5587c836507843f03519704-vGJhGq_fw658webp"
								mode=""></image>
						</view>
						<view class="nickname-grade">
							<view class="nickname">
								<text>爱笑的汤姆</text>
							</view>
							<view class="grade">
								<text class="cuIcon-favorfill lg text-gray"></text>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="character">
							<text class="two-omit">搭建啊激动了阿建档立卡点击就阿卡丽登记卡加端口几啊开了都金坷垃就恐龙当家哦架空</text>
						</view>
						<view class="attr">
							<text>蓝色</text>
						</view>
						<view class="thumb-list">
							<view class="list">
								<image src="http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png" mode="">
								</image>
							</view>
							<view class="list">
								<image src="http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png" mode="">
								</image>
							</view>
							<view class="list">
								<image src="http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png" mode="">
								</image>
							</view>
						</view>
					</view>
					<view class="look-all" @click="onEvaluate">
						<text>查看全部评价</text>
					</view>
				</view>
			</view>
			<!-- 排行榜 -->
			<view class="ranking-list">
				<view class="ranking-title">
					<view class="title">排行榜</view>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item, index) in 6" :key="index">
						<view class="thumb">
							<image src="http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png"></image>
						</view>
						<view class="title">
							<text class="two-omit">黑土优选 东北特产黑龙江黑木耳</text>
						</view>
						<view class="price">
							<text>￥121.00</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="products-introduction" ref="products">
				<view class="title">
					<text>商品介绍</text>
				</view>
				<view class="content" v-html="web_content"></view>
			</view>
			<!-- 底部 -->
			<view class="page-footer">
				<view class="footer-fn">
					<view class="list">
						<uv-icon name="server-man"></uv-icon>
						<text>联系客服</text>
					</view>
					<view class="list" @click="onToCart">
						<uv-icon name="shopping-cart"></uv-icon>
						<text>购物车</text>
					</view>
				</view>
				<view class="footer-buy">
					<view class="cart-add" @click="goodsattr = true,BuyType = 2">
						<text>加入购物车</text>
					</view>
					<view class="buy-at" @click="goodsattr = true,BuyType = 3">
						<text>立即购买</text>
					</view>
				</view>
			</view>
			<!-- 服务弹窗 -->
			<goods-serve :isShow="goodsserve" @noshow="goodsserve = false"></goods-serve>
			<!-- 优惠券 -->
			<goods-coupon :isShow="goodscoupon" @noshow="goodscoupon = false"></goods-coupon>
			<!-- 属性规格 -->
			<goods-attr :isShow="goodsattr" :BuyType="BuyType" @noshow="goodsattr = false"></goods-attr>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineComponent
	} from 'vue';
	import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';
	import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue'
	import GoodsServe from '../../components/GoodsServe/GoodsServe.vue'
	defineComponent([GoodsAttr, GoodsCoupon, GoodsServe])
	const TabShow = ref(0)
	const BuyType = ref(0)
	const goodsattr = ref(false)
	const goodsserve = ref(false)
	const goodscoupon = ref(false)
	const isMore = ref(false)
	const AttentionShow = ref(0)
	const distance = reactive([0])
	const swiperList = reactive([{
			id: 0,
			type: 'image',
			url: 'https://shop.jtwsz.cn/storage/images/20241125/fedf44e5c0d5e942348c83d76663bf97.png'
		},
		{
			id: 1,
			type: 'image',
			url: 'https://shop.jtwsz.cn/storage/images/20241125/fedf44e5c0d5e942348c83d76663bf97.png'
		},
		{
			id: 2,
			type: 'image',
			url: 'https://shop.jtwsz.cn/storage/images/20241125/fedf44e5c0d5e942348c83d76663bf97.png'
		},
		{
			id: 3,
			type: 'image',
			url: 'http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png'
		},
		{
			id: 4,
			type: 'image',
			url: 'http://shop.jtwsz.cn/storage/images/20241121/a907bd4b9da70188e9500a894cc592be.png'
		}
	])
	const web_content = ref(
		'<p><img src=\"https://shop.jtwsz.cn/storage/images/20241121/478099f2218a0434986287e92561ba04.png\" alt=\"QQ20241121-145148.png\" data-href=\"\" style="width:100%"/></p>'
	)
	const PageScrollTop = ref(0)
	const type = ref(0)
	import {
		onLoad,
		onReady,
		onPageScroll
	} from '@dcloudio/uni-app'
	onLoad((params) => {
		type.value = params.type || 0;
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	})
	onReady(() => {
		uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
			distance.push(data.top)
		}).exec()
		uni.createSelectorQuery().select(".products-introduction").boundingClientRect((data) => { //data - 各种参数
			distance.push(data.top)
		}).exec()
	})
	onPageScroll((e) => {
		distance.forEach((v, i) => {
			if (v - 50 <= e.scrollTop) {
				TabShow.value = i
			} else {
				PageScrollTop.value = e.scrollTop;
				return
			}
		})
	})
	const onBack = () => {
		// #ifdef H5
		history.back()
		// #endif
		// #ifndef H5
		uni.navigateBack();
		// #endif
	}
	const onTab = (type) => {
		TabShow.value = type;
		switch (type) {
			case 0:
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				break;
			case 1:
				uni.pageScrollTo({
					scrollTop: distance[1] - 50,
					duration: 300
				});
				break;
			case 2:
				uni.pageScrollTo({
					scrollTop: distance[2] - 50,
					duration: 300
				});
				break;
		}
	}
	const onToCart = () => {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}
	const onDepreciate = () => {
		uni.showToast({
			title: '降价通知提醒成功',
			icon: 'success'
		})
	}
	const onAttention = () => {
		if (AttentionShow.value === 0) {
			AttentionShow.value = 1;
			uni.showToast({
				title: '关注成功',
				icon: 'none'
			})
		} else {
			AttentionShow.value = 0;
			uni.showToast({
				title: '取消成功',
				icon: 'none'
			})
		}
	}
	const onEvaluate = () => {
		uni.navigateTo({
			url: '/pages/GoodsEvaluateList/GoodsEvaluateList'
		})
	}
</script>

<style scoped lang="scss">
	@import 'GoodsDetails.scss';
</style>